<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>document</title>
    <script type="text/javascript" src="layui/css/jquery-1.11.3.min.js"></script>
    <style>
    ul {
        list-style: none;
    }

    ul.box li {
        width: 20px;
        height: 200px;
        float: left;
        margin-left: 30px;
    }

    ul.box li a {
        width: 20px;
        display: block;
        height: 180px;
        background-color: #fff;
    }

    ul.box li:nth-child(1) {
        background-color: blue;
    }

    ul.box li:nth-child(2) {
        background-color: red;
    }

    ul.box li:nth-child(3) {
        background-color: yellow;
    }

    ul.box li:nth-child(4) {
        background-color: gray;
    }

    ul.box li:nth-child(5) {
        background-color: green;
    }

    ul.box li:nth-child(6) {
        background-color: black;
    }
    </style>
</head>

<body>
    <button id="btnOne">单次</button>
    <button id="btnMore">动次打次</button>
    <button id="btnStop">停</button>
    <ul id="box" class="box">
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</body>
<script type="text/javascript">
var timers = null;
$(function() {
    //单次
    $("#btnOne").click(function() {
        for (var i = 0; i < $("#box li").length; i++) {
            $("#box li a").eq(i).animate({ "height": Math.floor(Math.random() * 200) + "px" }, 2000);
        }
    });
    //多次
    $("#btnMore").click(function() {
        window.clearInterval(timers);
        timers = setInterval(function() {
            for (var i = 0; i < $("#box li").length; i++) {
                $("#box li a").eq(i).animate({ "height": Math.floor(Math.random() * 200) + "px" }, 500);
            }
        }, 500);
    });
    //停
    $("#btnStop").click(function() {
        window.clearInterval(timers);
    });
});
</script>

</html>